<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsNotes6</title>
</head>
<body>
	<form action="">
		<input type="text" name="good" onclick="console.log('哈哈哈')">
		<input type="text" id="tg">
		<input type="text" name="bi" onclick="console.log('222')">
		<input type="text" class="bad" onclick="console.log('111')">
	</form>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">

	<form name="form1" onsubmit="return validate()">
		用户名：<input type="text" name="uname">
		密码：<input type="password" name="pwd">
        <select name="area">
			<option value="0">请选择</option>
			<option value="gz">广州</option>
			<option value="sh">上海</option>
			<option value="bj">北京</option>
		</select>
		<textarea name="content" rows="10" cols="30"></textarea>



		<input type="submit" value="提交">
		<!-- <input type="submit" value="提交" onclick="return validate()"> -->
	</form>
	<script>
		// 方法
		// 信息提示框
        alert('弹出提示，有确定按钮，没有返回值')
        //确认框，有确认按钮和取消按钮，确认返回true，取消返回false

		console.log(document.links);
		console.log(document.forms);
		console.log(document.images);

		console.log(screen);
		console.log(navigator.userAgent);
		console.log(navigator.userAgent.search(/Chrome/));
		navigator.userAgent.search(/Chrome/)!=-1? console.log('谷歌浏览器'):console.log('不是谷歌浏览器')

		//获取文档对象
		//id
		let Id = document.getElementById('tg');
		console.log(Id);
        //class
        let Class = document.getElementsByClassName('bad')[0];
		console.log(Class);
		//Tag
		let Tag = document.getElementsByTagName('img')[0];
		console.log(Tag);
		//name
		let Name = document.getElementsByName('bi')[0];
		console.log(Name);
		//selector
		let selector = document.querySelector('ul li');
		console.log(selector);
		//selectorAll
		let selectorAll = document.querySelectorAll('ul li');
		console.log(selectorAll);
		let selectorAll2 = document.querySelectorAll('#tg');
		console.log(selectorAll2);


         
		//事件：JS与HTML的交互是通过用户和浏览器操作页面时引发的事件进行处理的
		//元素对象.on+事件名=function(){}
		//事件绑定方法
		//第一种,后来居上，会覆盖第三种
        Name.onclick = function(){
        	console.log('我被点击了1')
        }
        Name.onclick = function(){
        	console.log('我被点击了2')
        }
        //第二种，相亲相爱，不会覆盖第三种
        Class.addEventListener('click',function(){
        	console.log('我真的被点击了1')
        })
        Class.addEventListener('click',function(){
        	console.log('我真的被点击了2')
        })
        


        //表单
        var form1 = document.forms['form1']
        var form2 = document.forms[0]
        console.log(form1)
        console.log(form2)

        //获取form元素的表单域元素
        var e1 = form1.elements
        console.log(e1)
        var uname = e1['uname']
        var pwd = e1['pwd']
        console.log(uname)
        console.log(pwd)
        // 表单验证
		// 方法1：<input type="submit"onclick="return validate();" />
		// 方法2：<form action=""onsubmit="return validate();" />
		function validate () {
			console.log( uname.value )
			console.log( pwd.value )

			// 层层拦截
			if( uname.value == '' ) {
				alert('用户名不能为空')
				return false;
			}

			if( pwd.value == '' ) {
				alert('密码不能为空')
				return false;
			}

			if( !/[a-zA-Z0-9]{6,}/.test(pwd.value) ) {
				alert('密码至少为6位数以上...')
				return false;
			}

			return true;
		}

		//表单验证
		// 获取form元素
		var form1 = document.forms['form1']
		var form2 = document.forms[0]
		console.log(form1)
		console.log(form2)

		// 获取form元素的表单域元素
		var el = form1.elements
		console.log(el)

		var uname = el['uname']
		var pwd = el['pwd']
		var area = el['area']
		var content = el['content']

		console.log(uname)
		console.log(pwd)

		// 表单验证
		// 单个验证
		uname.onfocus = function() {
			console.log('获得焦点')
			uname.value = '';
		}
		uname.onblur = function() {
			console.log('失去焦点')
			if( uname.value == '' ) {
				alert('用户名不能为空')
			}
		}

		uname.onchange = function() {
			console.log(uname.value)
		}

		area.onchange = function() {
			console.log(area.value)
		}
		
		content.onchange = function() {
			console.log(content.value)
		}


		// 方法1：<input type="submit"onclick="return validate();" />
		// 方法2：<form action=""onsubmit="return validate();" />
		function validate () {
			console.log( uname.value )
			console.log( pwd.value )

			// 层层拦截
			if( uname.value == '' ) {
				alert('用户名不能为空')
				return false;
			}

			if( pwd.value == '' ) {
				alert('密码不能为空')
				return false;
			}

			if( !/[a-zA-Z0-9]{6,}/.test(pwd.value) ) {
				alert('密码至少为6位数以上...')
				return false;
			}

			if( area.value == 0) {
				alert('请选择您的所在地...')
				return false;
			}

			return true;
		}
    









	</script>

	
</body>
</html>